<template>
  <div>
    <ul v-for="(item, index) in list" :key="index">
      <li>
        <img :src="item.picUrl" alt="" />
        <div class="zxc">
          <p v-for="(item1, index1) in item.songList" :key="index1">
            {{ index + 1 }}. {{ item1.songname }}-{{ item1.singername }}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import service from "./service";

export default {
  data() {
    return {
      list: [],
    };
  },
  async created() {
    const result = await service.getBanner();
    this.list = result.data.topList;
    // console.log(result.data.topList);
    // console.log(result.data.topList[0].picUrl);
    // console.log(result.data.topList[0].songList);
  },
};
</script>

<style lang="less" scoped>
@import "../../../style/index.less";
ul {
  width: 100%;
  height: 100%;
  background: black;
  color: beige;
}
li {
  .h(120);
  padding-top: 5rem;
  margin: 0 5rem 0 5rem;
}
img {
  .w(100);
  .h(100);
  margin-right: 3rem;
  float: left;
}
.zxc {
  .w(225);
  .h(100);
  padding: 5rem 0 0 5rem;
  background: rgb(86, 85, 85);
  float: left;
}
p {
  margin-bottom: 3rem;
  .w(190);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
